/*
  学习目标：React生命周期-挂载阶段
  三大阶段：挂载时、更新时、卸载时
  挂载时 等同于Vue中的创建和挂载二合一
  
  // 1. constructor 代表创建时，对标vue2中的beforeCreate 和created，vue3中的setup
  // 2. render 作用：表示渲染什么内容，对标vue中的 beforeMount 和 beforeUpdate
  // 3. componentDidMount 代表：挂载后 对标的Vue中的mounted
  // 场景：💥1.发送请求、2. 最先获取DOM， 3监听、开启定时器等
*/

import React from 'react';
export default class App extends React.Component {
  // 作用： (早期)声明类里面的属性，在react中声明state 或者 ref
  // constructor() {
  //   // constructor作用: 让子级继承父级的一切属性
  //   // 在 constructor 一定要调用 super(),super 继承了父级所有的属性，并且把this指向当前(子级)
  //   super();
  //   this.state = {
  //     count: 100,
  //   };
  //   console.log(' constructor --- 创建前后 ');
  // }
  state = {
    count: 100,
  };
  componentDidMount() {
    const h1Node = document.querySelector('h1');
    console.log(' componentDidMount --- 渲染后 ', h1Node);
  }
  render() {
    console.log(' render --- 渲染前 ');
    return <h1> App - {this.state.count}</h1>;
  }
}
